<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 响应式布局 -->
    一套代码适用于多种视口终端,改变视口尺寸的时候,页面元素的布局尺寸随之改变
    多用于企业网站,适合简洁的网站




    <!-- 媒体查询  -->
    限制样式生效条件,如下就是最大宽为1000最小宽为800之间,样式生效
    @media (min-width:800px) and (max-width:1000px) {
    body {
    background-color: cyan;
    }
    }

    <!-- 完整写法 -->
    /* @media screen and (max-width:768px) {
    body {
    background-color: pink;
    }
    } */

    /* and () and () */
    /* 768-992之间 */
    @media (min-width:768px) and (max-width:992px) {
    body {
    background-color:green;
    }
    }


    <!-- 外链响应布局 -->
    <link rel="stylesheet" href="./one.css" media="(min-width:800px)">

</body>

</html>